<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400"></canvas>
		
		<script type="text/javascript">
			var c = document.getElementById("canvas");
			ctx = c.getContext("2d");
			
			// 半径
			let r = 180;
			// 圆心坐标（x和y一样）
			let point = 200;
			
			// 画
			function draw() {
				
				// 清空画布
				ctx.fillStyle= "#fff";  
				ctx.beginPath();  
				ctx.fillRect(0,0,400,400);  
				ctx.closePath(); 
				
				// 画时间刻度
				ctx.strokeStyle = "#000000";
				for (let i = 0;i < 60;i ++) {
					let hd = 6 * (i - 15) * Math.PI / 180;
					let x = point + r * Math.cos(hd);
					let y = point + r * Math.sin(hd);
					if ((i - 15) % 5 == 0) {
						if (i - 15 % 5 == 0) {
							ctx.strokeText(12 ,x,y);
						} else {
							ctx.strokeText(i / 5 ,x,y);
						}
					} else {
						ctx.strokeText(".",x,y);
					}
				}
				
				// 画中心圆点
				ctx.fillStyle="#000";
				// 画弧度
				ctx.arc(point,point,5,Math.PI*2,0,true);
				// 关闭路径
				ctx.closePath();
				// 填充路径
				ctx.fill(); 
				
				let now = new Date();
				
				
				
				// ctx.stroke();
				
				// 时针
				let hour = now.getHours();
				if (hour > 12) {
					hour -= 12;
				}
				console.log(hour);
				// 转为弧度
				let hd = 6 * (hour * 5 - 15) * Math.PI / 180;
				ctx.strokeStyle = "#000";
				ctx.lineWidth = 3;
				ctx.moveTo(point,point);
				ctx.lineTo(point + 120 * Math.cos(hd),point + 120 * Math.sin(hd));
				ctx.stroke();
				
				// 分针
				let minute = now.getMinutes();
				hd = 6 * (minute - 15) * Math.PI / 180;
				ctx.strokeStyle = "#000";
				ctx.lineWidth = 1;
				ctx.moveTo(point,point);
				ctx.lineTo(point + 160 * Math.cos(hd),point + 160 * Math.sin(hd));
				ctx.stroke();
				
				// 画秒针
				let seconds = now.getSeconds();
				ctx.beginPath();
				// console.log(seconds);
				ctx.strokeStyle = "#FF0000";
				hd = 6 * (seconds - 15) * Math.PI / 180;
				ctx.moveTo(point,point);
				ctx.lineTo(point + r * Math.cos(hd),point + r * Math.sin(hd));
				ctx.stroke();
				
			}
			
			setInterval(draw,1000);
			
			// ctx.stroke();
		</script>
	</body>
</html>
